<template>
  <div class="app-container">
    <el-table :data="taskList" v-loading="loading">
      <el-table-column label="序号" width="50" align="center">
        <template #default="{ $index }">
          {{ $index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        label="开始节点名称"
        align="center"
        prop="nodeName"
        show-overflow-tooltip
      />
      <el-table-column
        label="结束节点名称"
        align="center"
        prop="targetNodeName"
        show-overflow-tooltip
      />
      <el-table-column
        label="操作人"
        align="center"
        prop="approver"
        show-overflow-tooltip
      />
<!--      <el-table-column-->
<!--        label="协作人"-->
<!--        align="center"-->
<!--        prop="collaborator"-->
<!--        show-overflow-tooltip-->
<!--      />-->
      <el-table-column
        label="流程状态"
        align="center"
        prop="flowStatus"
        show-overflow-tooltip
      >
        <template #default="{ row }">
          <dict-tag :options="flow_status" :value="row.flowStatus"/>
        </template>
      </el-table-column>
      <el-table-column
        label="审批意见"
        align="center"
        prop="message"
        show-overflow-tooltip
      />
      <el-table-column
        label="创建时间"
        align="center"
        prop="createTime"
        width="160"
        show-overflow-tooltip
      >
        <template #default="{ row }">
          <span>{{ parseTime(row.createTime) }}</span>
        </template>
      </el-table-column>
<!--      <el-table-column label="业务详情" align="center" width="100">-->
<!--        <template #default="{ row }">-->
<!--          <el-button-->
<!--            size="small"-->
<!--            v-if="row.ext"-->
<!--            @click="handleView(row)"-->
<!--          >查看</el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        label="操作"-->
<!--        align="center"-->
<!--        width="110"-->
<!--        fixed="right"-->
<!--        class-name="small-padding fixed-width"-->
<!--      >-->
<!--        <template #default="{ row }">-->
<!--          <el-button-->
<!--            size="small"-->
<!--            type="text"-->
<!--            v-if="row.nodeType === 1 && row.formCustom === 'Y'"-->
<!--            @click="handleFormView(row.id)"-->
<!--          >查看</el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->
    </el-table>

    <!-- 动态组件 -->
    <component
      v-if="dynamicComponent"
      :is="dynamicComponent"
      :businessId="currentBusinessId"
      :taskId="currentTaskId"
      :infoVo="currentInfoVo"
      @refresh="fetchTaskList"
    />

    <!-- 表单对话框 -->
    <FormDialog
      v-if="showFormDialog"
      :disabled="true"
      formName="查看"
      :visible="showFormDialog"
      :showApproval="false"
      :taskId="currentTaskId"
      type="1"
      @update:visible="showFormDialog = $event"
    />
  </div>
</template>

<script setup>
import {ref, onActivated, defineAsyncComponent, getCurrentInstance, onMounted} from 'vue';
import { useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
import { doneList } from '@/api/flow/execute';
import FormDialog from '@/views/form/definition/FormDialog.vue';
import { parseTime } from '@/utils/ruoyi';

const route = useRoute();
const {proxy} = getCurrentInstance()
// 字典数据
const {flow_status} = proxy.useDict("flow_status")

// 状态管理
const loading = ref(false);
const taskList = ref([]);
const showFormDialog = ref(false);

// 当前任务/业务信息
const currentTaskId = ref('');
const currentBusinessId = ref('');
const currentInfoVo = ref(null);

// 动态组件
const dynamicComponent = ref(null);

// 路由参数
const instanceId = ref(route.params.instanceId || '');
const formPath = ref(route.query.formPath || '');
const routeInfoVo = ref(route.query.infoVo ? JSON.parse(route.query.infoVo) : {});

// 获取任务列表
const fetchTaskList = async () => {
  try {
    loading.value = true;
    if (!instanceId.value) {
      ElMessage.warning('缺少流程实例ID');
      return;
    }

    const response = await doneList(instanceId.value);
    taskList.value = response.data || [];
  } catch (error) {
    ElMessage.error('获取任务列表失败: ' + error.message);
  } finally {
    loading.value = false;
  }
};

// 查看业务详情
const handleView = (row) => {
  currentTaskId.value = row.id;
  currentBusinessId.value = row.businessId;

  // 解析扩展数据
  if (row.ext) {
    try {
      currentInfoVo.value = JSON.parse(row.ext);
    } catch (e) {
      console.error('解析扩展数据失败:', e);
      currentInfoVo.value = {};
    }
  }

  // 确定要使用的表单路径
  const targetFormPath = row.formPath || formPath.value;

  // 动态加载组件
  if (targetFormPath) {
    dynamicComponent.value = defineAsyncComponent(() =>
      import(`@/views/${targetFormPath}`).catch(() =>
        import('@/views/error/404.vue')
      )
    );
  } else {
    ElMessage.warning('未配置表单路径');
  }
};

// 查看表单详情
const handleFormView = (taskId) => {
  currentTaskId.value = taskId;
  showFormDialog.value = true;
};

// 当组件激活时（在 <keep-alive> 中）
onMounted(() => {
  instanceId.value = route.params.instanceId || '';
  formPath.value = route.query.formPath || '';
  routeInfoVo.value = route.query.infoVo ? JSON.parse(route.query.infoVo) : {};

  if (instanceId.value) {
    fetchTaskList();
  }
});
</script>

<style scoped>
.app-container {
  padding: 20px;
}
.fixed-width {
  width: 110px;
}
</style>
